<html>
<head>
	<title>Haan - Kreasi Ibu Juara</title>
	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<!-- font Awesome -->
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<!-- Custom styles for this template -->
	<link href="css/theme.css" rel="stylesheet">
	<link href="css/camera.css" rel="stylesheet">
</head>
<body>
	<header id="top" class="navbar-one navbar-static-top header-nav" role="banner">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle collapsed" data-target=".bs-navbar-collapse" data-toggle="collapse" type="button">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			</div>
			<nav class="collapse navbar-collapse bs-navbar-collapse pull-right">
				<ul class="socmed">
					<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
					<li class="google"><a href="#"><i class="fa fa-google-plus"></i></a></li>
					<li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
					<li class="pinterest"><a href="#"><i class="fa fa-pinterest"></i></a></li>
				</ul>
			</nav>
		</div>
	</header>
	<header id="top" class="navbar-two navbar-static-top-two header-nav-two" role="banner">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle collapsed" data-target=".menu-navbar-collapse" data-toggle="collapse" type="button">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a href="#"><img src="img/logo.png" id="logo"></a>
			</div>
			<nav class="collapse navbar-collapse menu-navbar-collapse">
				<ul class="nav navbar-nav">
					<li><a href="#">PRODUK</a></li>
					<li><a href="#">RECIPES</a></li>
					<li><a href="#">EVENT</a></li>
					<li><a href="#">ARTICLE</a></li>
					<li><a href="#">SMS</a></li>
				</ul>
				<div class="pull-right">
					<form>
						<input name="keyword" type="text" class="search">
					</form>
				</div>
			</nav>
		</div>
	</header>

	<section id="header">
		<div class="container">
			<div class="row">
				<div class="col-md-9">
					<div class="camera_wrap camera_red_skin" id="camera_wrap_2">
						<div data-thumb="img/slides/thumbs/bridge.jpg" data-src="img/slides/bridge.jpg">
							<div class="camera_caption fadeFromBottom">
								Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
							</div>
						</div>
						<div data-thumb="img/slides/thumbs/leaf.jpg" data-src="img/slides/leaf.jpg">
							<div class="camera_caption fadeFromBottom">
								It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
							</div>
						</div>
						<div data-thumb="img/slides/thumbs/road.jpg" data-src="img/slides/road.jpg">
							<div class="camera_caption fadeFromBottom">
								<em>It's completely free</em> (even if a donation is appreciated)
							</div>
						</div>
						<div data-thumb="img/slides/thumbs/sea.jpg" data-src="img/slides/sea.jpg">
							<div class="camera_caption fadeFromBottom">
								Camera slideshow provides many options <em>to customize your project</em> as more as possible
							</div>
						</div>
						<div data-thumb="img/slides/thumbs/shelter.jpg" data-src="img/slides/shelter.jpg">
							<div class="camera_caption fadeFromBottom">
								It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
							</div>
						</div>
						<div data-thumb="img/slides/thumbs/tree.jpg" data-src="img/slides/tree.jpg">
							<div class="camera_caption fadeFromBottom">
								Different color skins and layouts available, <em>fullscreen ready too</em>
							</div>
						</div>
					</div>
				</div>

				<div class="col-md-3">
					<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
						<ol class="carousel-indicators">
							<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
							<li data-target="#carousel-example-generic" data-slide-to="1"></li>
							<li data-target="#carousel-example-generic" data-slide-to="2"></li>
						</ol>
						<div class="carousel-inner" role="listbox">
							<div class="item active">
								<img src="img/preview1.jpg" alt="First slide">
							</div>
							<div class="item">
								<img src="img/preview1.jpg" alt="Second slide">
							</div>
							<div class="item">
								<img src="img/preview1.jpg" alt="Third slide">
							</div>
						</div>		
					</div>
				</div>
			</div>
		</div>
	</section>

	<section id="main-body">
		<div class="container">
			<div class="row">
				<div class="col-md-9">
					<div class="row">
						<div class="col-md-6">Article</div>
						<div class="col-md-6">Article</div>
					</div>
				</div>

				<div class="col-md-3">
					<h3>Cari Resep</h3>
					<h4>Social Media</h4>
				</div>
			</div>
		</div>
	</section>

	<section id="recipes">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<h2>Recipes scroller</h2>
				</div>
			</div>
		</div>
	</section>

	<footer>
		<div class="container footer">
			<div class="row">
				<div class="col-md-4">
					<h2>About Haan</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</p>
				</div>
				<div class="col-md-4">
					
				</div>
				<div class="col-md-4">
					<h2>Contact Us</h2>
					<p>PT. Gandum Mas Kencana,<br/>
						Jl Raya Moh Toha Km 3,<br/>
						Tangerang - 15113
					</p>
					<p>informasi@haan.co.id<br/>
						021 5520023
					</p>
				</div>
			</div>
		</div>
	</footer>
	 <!-- Bootstrap core JavaScript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/jquery.1.11.2.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script type='text/javascript' src='js/jquery.min.js'></script> 
	<script type='text/javascript' src='js/jquery.mobile.customized.min.js'></script>
	<script type='text/javascript' src='js/jquery.easing.1.3.js'></script> 
	<script type='text/javascript' src='js/camera.js'></script> 
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
	<script src="js/ie10-viewport-bug-workaround.js"></script>
	<script>
		jQuery(function(){
			jQuery('#camera_wrap_2').camera({
				height: '400px',
				loader: 'bar',
				pagination: false,
				thumbnails: true
			});
		});
	</script>
</body>
</html>